<script setup>

import router from "../../router/index.js";
import {ChatLineSquare, Operation} from "@element-plus/icons-vue";
import recreationBottom from "../../components/recreationBottom.vue"
import {ref} from "vue";
import request9191 from "../../utils/request9191.js";
import {ElMessage} from "element-plus";
const images = [
  {url: new URL("../../assets/recreation/1.png", import.meta.url).href},
  {url: new URL("../../assets/recreation/2.jpg", import.meta.url).href},
  {url: new URL("../../assets/recreation/3.png", import.meta.url).href},
  {url: new URL("../../assets/recreation/4.png", import.meta.url).href},
  {url: new URL("../../assets/recreation/5.jpg", import.meta.url).href},
  {url: new URL("../../assets/recreation/6.jpg", import.meta.url).href},
]

const clubActivity = ref([])
//获取全部活动
const getClubActivity = ()=>{
  request9191({
    url: '/clubActivity/getAll',
    method: 'get',
  }).then((res)=>{
    clubActivity.value=res.data.data
  })
}

//获取全部公告,放入数组中
const clubInform = ref([])
const getClubInform = () =>{
  request9191({
    url: '/clubInform/findInform',
    method: 'get' ,
  }).then((res) =>{
    clubInform.value=res.data.data
  })
}
getClubInform()
const Role = () =>{
  if (sessionStorage.getItem("type") === "7"){
    router.push('/headerRecreationInfo')

  }
  else if(sessionStorage.getItem("type") === "4"){
    router.push('/manageRecreationInfo')
  }
  else {
    ElMessage.info("您没有权限。。")
  }

}

getClubActivity()

</script>

<template>


  <div class="recreationAll">
    <div class="top">
      <div class="top-left">
        <img src="../../assets/recreation/logo.png" style="height: 170px; width: 300px;
margin-right: 100px;">
      </div>

      <div class="top-right">
        <ul class="ul11" style="display: flex">
            <li @click="router.push('/recreationClubStart')">首页</li>
            <li @click="router.push('/userclub')">活力社团</li>
            <li @click="router.push('/userActivity')">社团活动</li>
            <li @click="router.push('/userRules')">规章制度</li>
            <li @click="Role()">管理社团信息</li>
            <li @click="router.push('/')">回到前台</li>
        </ul>
      </div>
    </div>
  </div>
<!--  走马灯-->
  <el-carousel :interval="4000" type="card" height="350px">
    <el-carousel-item v-for="item in images" :key="item">
      <img :src="item.url" @click="router.push('/userclub')" alt="?"/>
    </el-carousel-item>
  </el-carousel>


  <div class="all">
      <div class="bottom">
        <div class="bottom-left">
          <div class="header">

            <h3><el-icon><Operation /></el-icon> 社团快讯</h3>
            <hr>
          </div>

          <div class="left1">
            <div class="left1_1">
              <div class="news">
                <img src="../../assets/recreation/news.jpg" height="300px" width="430px"
                style="border-top: #ffa200 10px solid"/>
                <scan><br><br>纷呈运动趁年少,不负好春光</scan>
              </div>
            </div>
            <el-scrollbar height="550px">
              <div class="left1_2">
                <div v-for="item in clubActivity" class="oldActivity" >
                  <div class="old_1">
                    <scan class="nold" @click="router.push('/userActivity')"><h3>活动名称：{{item.actName}}</h3></scan><br>
                    <scan class="nold_1" @click="router.push('/userActivity')">活动概述：{{item.actSummarize}}</scan>
                    <div class="old_date" @click="router.push('/userActivity')">开始时间：{{item.actBeginTime}}</div>
                  </div><hr>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>


        <div class="bottom-right">
          <h3><el-icon><ChatLineSquare /></el-icon>通知公告</h3>
          <hr>

          <el-scrollbar height="550px">
          <div  class="right_1">
            <div v-for="item in clubInform">
              <div class="old_1">
              <scan class="nold"><h3>通知标题:{{item.ctitle}}</h3></scan>
              <scan class="nold_1">通知概述:{{item.cparticulars}}</scan>
                <div class="old_date">发布时间：{{item.cReTime}}</div>
              </div><hr>
            </div>
          </div>
          </el-scrollbar>
        </div>

      </div>
    <recreationBottom/>
  </div>

</template>

<style scoped>
.el-carousel__item h3{
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item{
  width: 700px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.top {
  display: flex;
}
.top-left{
  margin-left: 50px;

}
.top-right{
  margin-top: 40px;
  margin-left: 140px;
}
li {
  list-style: none;
  margin-right: 30px;
  cursor: pointer;
  color: #007bff;
  font-family: "Arial Narrow",sans-serif;
  font-size: 25px;
}
a{
  text-decoration: none;
  color: inherit;
}


.all{
  /*background-color: #cbb5e2;*/
  height: 700px;
  margin-top: 150px;
}
.bottom{
  display: flex;
}

.bottom-left{
  width: 1000px;
  height: 650px;
  margin-left: 50px;
}

.bottom-right{
  width: 400px;
  margin-left: 25px;
}

.left1{
  display: flex;
  width: 925px;
  height: 550px;
  margin-left: 40px;
  margin-top: 20px;
  justify-content: space-between;
}

.left1_1{
  /*background-color: orange;*/
  width: 430px;
  height: 550px;
  border: lightgray 1px solid;
}

.left1_2{
  width: 430px;
  height: 100%;
  border: lightgray 1px solid;
  border-top: #cbb5e2 10px solid;
}

.header{
  margin-left: 40px;
}

.right_1{
  width: 400px;
  height: 100%;
  margin-top: 15px;
  border: lightgray 1px solid;
  border-top: deepskyblue 10px solid;
}

.old_1{
  height: 200px;
  position: relative;
}

.old_date{
position: absolute;
  right: 10px;
  bottom: 10px;
  color: grey;
}

.nold{
  position: relative;
  top: 10px;
  left: 30px;
}
.nold_1{
  position: relative;
  top: 0px;
  left: 30px;
}

</style>
